
import React, {useState, useEffect, useRef} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Image,
  ImageBackground,
  TouchableOpacity,
  Dimensions
} from 'react-native';
import {
  Colors,
} from 'react-native/Libraries/NewAppScreen';
import HybridUtil from '@util/index'
import {Header, HeaderNeck, ContentIcons, ServicePoint } from '@home/index';
import { ImageRequire } from '@mapjs/img-require';
import AnimateContainer from './src/pages/home/AnimateContainer';
const _width = Dimensions.get('window').width;
const _height = Dimensions.get('window').height;
const { imgs } = ImageRequire;

const App = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: Colors.lighter,
  };
  const [rColor, setRColor] = useState(18)
  const [gColor, setGColor] = useState(137)
  const [bColor, setBColor] = useState(170)
  const [alp, setAlp] = useState(0.9)
  let navBar = useRef()

  function _onScroll (el) {
    let _offsetY = el.nativeEvent.contentOffset.y;
    // console.log(_offsetY)
    // console.log(el.nativeEvent)
    if (_offsetY >= 0 && _offsetY <= 60) {
      // ['rgba(18,137,170,0.9)', 'rgba(243,80,75,1)']
      let colorR = 18+225*_offsetY/60;
      let colorG = 137-57*_offsetY/60;
      let ColorB = 170-95*_offsetY/60;
      setRColor(colorR)
      setGColor(colorG)
      setBColor(ColorB)
      setAlp(0.9)
      navBar && navBar.onScroll(el)
    } else if (_offsetY > 60) {
      setRColor(234)
      setGColor(80)
      setBColor(75)
      setAlp(0.98)
      // 重新定义el
      let _el = {nativeEvent:{contentOffset:{x:0,y:60}}}
      navBar && navBar.onScroll(_el)
    }
  }

  return (
    <SafeAreaView style={[backgroundStyle, {flex:1}]}>
      <StatusBar barStyle={'light-content'} backgroundColor={`rgba(${rColor},${gColor},${bColor},${alp})`}/>
      <AnimateContainer ref={ref=>navBar=ref} >
        <Header /**UI头部布局*//>
      </AnimateContainer>
      <ScrollView
      onScroll={_onScroll}
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
            <HeaderNeck /**UI头部布局*//>
            <View style={styles.content_container}>
              <ContentIcons />
              <View style={styles.promp_container}>
                <ImageBackground resizeMode='cover' tintColor={'rgba(255,227,215,1)'} style={styles.image_headline} source={imgs['chatfrom_bg_orange']}>
                  <Text style={[styles.prompt_txt_,{fontSize:8}]}>{'亲爱的'}</Text>
                  <Text style={[styles.prompt_txt_, {fontWeight:'300', fontSize:8}]}>{'上午好~'}</Text>
                </ImageBackground>
                <Text style={styles.prompt_txt}>{'您还没有收到消息，快来签约免费动账通知吧！'}</Text>
              </View>
              <Image style={styles.image_banner} source={imgs['favor_banner']}></Image>
            </View>
            <ServicePoint />
            <View>
              <Text style={styles.txtTile}>{'云视播'}</Text>
              <ImageBackground resizeMode='contain' style={styles.img_banner} source={imgs['cloud_video']}>
                <TouchableOpacity>
                </TouchableOpacity>
              </ImageBackground>
              <Text style={styles.txtTile}>{'工银服务'}</Text>
              <ImageBackground resizeMode='contain' style={[styles.img_banner, {height:(HybridUtil.screen.width - 30)*0.346,}]} source={imgs['icbc_bank_service_order_default']}>
                <TouchableOpacity>
                </TouchableOpacity>
              </ImageBackground>
            </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};


const styles = StyleSheet.create({
  content_container: {
    flex:1,
    marginTop: -10,
    backgroundColor:'#ffffff',
    borderWidth:1,
    borderColor:'#ffffff',
    borderTopLeftRadius: 8,
    borderTopRightRadius: 8
  },
  image_banner: {
    width:HybridUtil.screen.width - 15,
    height:60,
    resizeMode: 'cover',
    marginTop:10,
  },
  prompt_txt:{
    fontSize: 10,
    color: 'rgba(80,80,80, 0.7)',
    fontFamily: 'lucida grande',
  },
  prompt_txt_:{
    fontSize: 11,
    color: 'rgba(188,52,26, 0.9)',
    paddingHorizontal:6,
    fontFamily: 'lucida grande',
    fontWeight:'bold',
  },
  promp_container: {
    flex:1,
    marginHorizontal:15,
    borderRadius:5,
    borderWidth:1,
    borderColor:'rgba(255,227,215,1)',
    height:29,
    alignItems:'center',
    flexDirection:'row'
  },
  image_headline: {
    width:52,
    height:28,
    justifyContent:'center'
  },
  img_banner: {
    width:HybridUtil.screen.width - 30,
    height:(HybridUtil.screen.width - 30)*0.146,
    alignSelf:'center',
    marginBottom:20
  },
  txtTile: {
    fontSize:13,
    paddingLeft:16,
    paddingBottom:6,
    color:'rgba(80,80,80, 0.8)', 
    fontWeight:'bold'
  }
});

export default App;
